<template>
  <list-detail-layout>
    <template #detailMain>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">基本信息</h4>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品名称</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.commodityName"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品代码</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.commodityCode"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品说明</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.remarks"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品状态</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="$options.filters.DictLabelFilter(commodityInfor.status, commodityData.commodityStatus)"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品地址</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.url"
          ></table-ellipsis>
        </div>
      </div>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">商品配置</h4>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">支持车型</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.zcModelName"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">包含服务</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.serveName"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">商品价格</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="`${commodityInfor.price}元`"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">有效期</span>
          <div class="baseInfoItemContent">
            <span v-if="commodityInfor.validityPeriod === '1'">{{ commodityInfor.validityPeriodDay }}天</span>
            <span v-else>永久有效</span>
          </div>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">退订设置</span>
          <div class="baseInfoItemContent">
            <span v-if="commodityInfor.tdSeting === '1'">{{
              $options.filters.DictLabelFilter(commodityInfor.tdSetinDay, commodityData.tdsetDayList)
            }}</span>
            <span v-else>不可退订</span>
          </div>
        </div>
      </div>
    </template>
    <template #detailRight>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">操作信息</h4>
        <!-- 创建时间 -->
        <div class="baseInfoItem">
          <span class="baseInfoItemName">{{ $t('timeOfCreation') }}</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="$options.filters.moment(commodityInfor.createTime)"
          ></table-ellipsis>
        </div>
        <!-- 创建人 -->
        <div class="baseInfoItem">
          <span class="baseInfoItemName">{{ $t('creator') }}</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.createBy"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">最近更新时间</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="$options.filters.moment(commodityInfor.updateTime)"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">最近更新人</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="commodityInfor.updateBy"
          ></table-ellipsis>
        </div>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapState } from 'vuex'

export default {
  components: {
    ListDetailLayout,
    TableEllipsis
  },
  props: {
    commodityInfor: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapState({
      commodityData: (state) => state.commodityManage
      // serveData: state => state.subscriptionMaintain
    })
  },
  watch: {},
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.baseInfo {
  margin-bottom: 20px;
  padding-bottom: 15px;
  .baseInfoItem {
    font-size: 1.4rem;
    margin-top: 18px;
    position: relative;
    .baseInfoItemName {
      position: absolute;
      left: 0;
      top: 0;
    }
    .baseInfoItemContent {
      height: 18px;
      padding-left: 140px;
    }
  }
}
</style>
